<style lang="less">
    @import "workPath.less";
    .ivu-table td.demo-table-info-column{
        background: #ffffff;
        color: #020202;
    }
    .ivu-table td.demo-table-info-column1{
        background: #ffffff;
        /*color: #47ff11;*/
        color: #020202;

    }
    div1{
        float: left;
    }
</style>
<template>
    <div id="containerMap1">
        <div id="container" ></div>
        <!--<div id="buttonDiv">-->
        <!--<i-Switch v-model="switch1" @on-change="change" size="7px" />-->
        <!--</div>-->
        <div id="echarts" >
            <div id="diDiv">
                <div id="headDiv">
                    <card>
                        <p class="cardTitle3" style="size: A4;font-weight:600;">截止今日,全市河长共<span style="color: #FF6633;font-size: large" >{{hzAll}}</span>人,
                            流域河长<span style="color: #FF6633;font-size: large" >{{sjhzAll}}</span>人,
                            区级河长<span style="color: #FF6633;font-size: large" >{{qjhzAll}}</span>人,
                            街乡级河长<span style="color: #FF6633;font-size: large" >{{jxhzAll}}</span>人,
                            村级河长<span style="color: #FF6633;font-size: large" >{{cjhzAll}}</span>人
                            (数据时间:<span style="color: #FF6633;font-size: large" >{{shijian}}</span>)</p>
                    </card>
                </div>
                <div id="zhongDiv">
                <div  id="leftDiv">
                    <!--<Card dis-hover padding="16" bordered="false" id="leftTop">-->
                        <!--<p slot="title" class="cardTitle" style="color: #00a0e9">河长信息</p>-->
                        <!--<Button  size="large" type="warning" long shape="circle" ><span class="bSpan">所有巡河人数 : {{peopleAll}}</span></Button>-->
                        <!--<br><br>-->
                        <!--<Button size="large" type="success" long shape="circle"><span class="bSpan">当前巡河人数 : {{nowPeopleAll}}</span></Button>-->
                    <!--</Card>-->
                    <Card dis-hover padding="16" bordered="false" id="leftTop">
                        <p slot="title" class="cardTitle" style="color: #00a0e9">自处理代办事件<Button size="small" type="warning">{{dbtotal}}</Button>
                            <Button  type="error" size="small" style="float: right" vertical-align="middle" to="/activiti/todo-manage">查看更多</Button></p>
                        <Table
                                width="100%"
                                :border="showBorder"
                                :stripe="showStripe"
                                :height="fixedHeader ? 250 : ''"
                                :data="dbdata"
                                :columns="zclColumns"
                        ></Table>
                    </Card>
                    <!--间隔-->
                    <card id="left0Top"></card>
                    <Card dis-hover padding="16" bordered="false" id="left2Top">
                        <p slot="title" class="cardTitle2" style="color: #00a0e9">未按期完成巡河任务村</p>
                        <!-- ECharts图表测试 -->
                        <div id="myChart" :style="{width: '100%', height: '170%'}"></div>
                    </Card>
                    <!--间隔-->
                    <!--<card id="left00Top"></card>-->
                    <!--<Card dis-hover padding="16" bordered="false" id="left3Top">-->
                        <!--<p slot="title" class="cardTitle2" style="color: #00a0e9">事件统计</p>-->
                        <!--<p style="font-size: smaller;color: #020202">截至今日,共接收问题<span style="color: #FF6633;font-size: large" >{{sjAll}}</span>件,处理<span style="color: #FF6633;font-size: large" >{{yAll}}</span>件.</p>-->
                        <!--<div1 :style="{width: '100%', height: '100%'}">-->
                            <!--<div1 id="myChart2" :style="{top:'1%',left:'0.5%',width: '47%', height: '95%'}"></div1>-->
                            <!--<div1 id="myChart4" :style="{overflow: auto,top:'1%',width: '43%', height: '95%'}"></div1>-->
                        <!--</div1>-->

                        <!--&lt;!&ndash;&lt;!&ndash; ECharts图表测试 &ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<div id="myChart2" :style="{width: '100%', height: '130%'}"></div>&ndash;&gt;-->
                    <!--</Card>-->
                    <!--<card id="left000Top"></card>-->
                    <!--<Card dis-hover padding="16" bordered="false" id="left4Top">-->
                        <!--<p slot="title" class="cardTitle" style="color: #00a0e9">发现问题数及整改率</p>-->
                        <!--<p style="font-size: smaller;color: #020202"><span style="color: #FF6633;font-size: large" >{{year}}</span>年<span style="color: #FF6633;font-size: large" >{{month}}</span>月截止目前基层河长巡河共发现问题<span style="color: #FF6633;font-size: large" >{{jcAll}}</span>个,发现问题整改完成<span style="color: #FF6633;font-size: large" >{{zgAll}}</span>个,问题整改率<span style="color: #FF6633;font-size: large" >{{rectify}}</span>%.</p>-->
                        <!--<div1 :style="{width: '100%', height: '100%'}">-->
                            <!--<div1 id="myChart22" :style="{top:'1%',left:'0.5%',width: '47%', height: '95%'}"></div1>-->
                            <!--<div1 id="myChart23" :style="{overflow: auto,top:'1%',width: '43%', height: '95%'}"></div1>-->
                        <!--</div1>-->
                    <!--</Card>-->
                </div>
                    <!--中间-->
                    <!--中1-->
                    <div id="center">
                        <Card dis-hover padding="16" bordered="false" id="center1Top">
                            <p slot="title" class="cardTitle" style="color: #00a0e9">人均巡河里程</p>
                            <Table  width="100%"  :columns="columns2" :data="dataAvg" ></Table>
                        </Card>
                        <!--间隔-->
                        <card id="center0Top"></card>
                        <!--中二-->
                        <Card dis-hover padding="16" bordered="false" id="center2Top">
                            <p slot="title" class="cardTitle2" style="color: #00a0e9">待办事件</p>
                            <div class="divcss5" >代办提醒(<span style="color: #FF6633;font-size: large" >{{dbtotal}}</span>件)
                                <Button type="primary" @click="modal1 = true" size="small" style="float: right" >详细</Button>
                                <!--<Button  type="primary" size="small" style="float: right; @click="modal1 = true">详细</Button>-->
                                <Modal
                                        width="58%"
                                        v-model="modal1"
                                        title="待办事件"
                                        ok-text="进入我的代办"
                                        @on-ok="path"
                                >
                                    <Table
                                            class="p1"
                                            :border="showBorder"
                                            :stripe="showStripe"
                                            :show-header="showHeader1"
                                            :height="fixedHeader ? 250 : ''"
                                            :data="dbdata"
                                            :columns="xxdbcolumns">
                                        <!--:loading="loading"-->
                                        <!---->
                                        <!--:columns="xxdbcolumns"-->
                                        <!--sortable="custom"-->
                                        <!--:data="xxdbdata"-->
                                        <!--size="small">-->
                                        <!--border-->
                                        <!--@on-sort-change="changeSort"-->
                                        <!--@on-selection-change="showSelect"-->
                                        <!--ref="table"-->
                                    </Table>
                                    <!--<p>&nbsp</p>-->
                                    <!--<Button type="primary"  to="/activiti/todo-manage" style="float: right">进入我的代办</Button><br>-->
                                    <!--<p>&nbsp</p>-->
                                </Modal>
                            </div>
                            <!--  :show-header="showHeader"  是否显示表头-->
                            <Table
                                    width="100%"
                                    :border="showBorder"
                                    :stripe="showStripe"
                                    :show-header="showHeader"
                                    :height="fixedHeader ? 250 : ''"
                                    :data="dbdata"
                                    :columns="dbColumns"
                            >
                            </Table>
                        </Card>
                        <!--<card id="center000Top"></card>-->
                        <!--&lt;!&ndash;中三&ndash;&gt;-->
                        <!--<Card dis-hover padding="16" bordered="false" id="center3Top">-->

                        <!--</Card>-->
                    </div>
                    <!--右列-->
                    <div id="rightDiv">
                        <Card  dis-hover padding="16" bordered="false" id="rightTop">
                            <p slot="title" class="cardTitle">巡查报告 <Button  type="error" size="small" vertical-align="middle">查看更多</Button></p>
                            <Table  width="100%"  :columns="columns1" :data="data1" ></Table>
                        </Card>
                        <!--间隔-->
                        <card id="right0Top"></card>
                        <Card dis-hover padding="16" bordered="false" id="right2Top">
                            <p slot="title" class="cardTitle2" style="color: #00a0e9">巡查统计</p>
                            <p style="font-size: smaller;color: #020202">巡河共<span style="color: #FF6633;font-size: large" >{{xcAll}}</span>次,
                                共巡河<span style="color: #FF6633;font-size: large" >{{xhAll}}</span>公里</p>
                            <div id="myChart3" :style="{width: '100%', height: '140%'}"></div>
                        </Card>
                        <!--间隔-->
                        <!--<card id="right00Top"></card>-->
                        <!--<Card dis-hover padding="16" bordered="false" id="right3Top">-->

                        <!--</Card>-->

                    </div>
                     <div id="BigDiv">
                         <Card  dis-hover padding="16" bordered="false" id="Big1Div">
                             <p slot="title" class="cardTitle1" style="color: #00a0e9">发现问题数及整改率</p>
                             <p style="font-size: smaller;color: #020202"><span style="color: #FF6633;font-size: large" >{{year}}</span>年<span style="color: #FF6633;font-size: large" >{{month}}</span>月截止目前基层河长巡河共发现问题<span style="color: #FF6633;font-size: large" >{{jcAll}}</span>个,发现问题整改完成<span style="color: #FF6633;font-size: large" >{{zgAll}}</span>个,问题整改率<span style="color: #FF6633;font-size: large" >{{rectify}}</span>%.</p>
                             <div1 :style="{top:'20%', width: '100%', height: '150%'}">

                                 <div1 id="myChart23" :style="{overflow: auto,top:'35px',left:'-10%',top:'1%',width: '47%', height: '150%'}"></div1>
                                 <div1 id="myChart22" :style="{top:'20px',left:'-10%',width: '47%', height: '150%'}"></div1>
                             </div1>
                             <!--<div style="width: 100%">-->
                                 <!--<div id="myChart22" :style="{top:'20px',left:'-10%',width: '100%', height: '150%'}"></div>-->
                             <!--</div>-->
                         </Card>
                         <Card  dis-hover padding="16" bordered="false" id="Big2Div">
                             <p slot="title" class="cardTitle1" style="color: #00a0e9">事件统计</p>
                             <p style="font-size: smaller;color: #020202">截至今日,共接收问题<span style="color: #FF6633;font-size: large" >{{sjAll}}</span>件,处理<span style="color: #FF6633;font-size: large" >{{yAll}}</span>件.</p>
                             <div1 :style="{top:'20%', width: '100%', height: '150%'}">
                                 <div1 id="myChart2" :style="{top:'1%',top:'27px',left:'-4%',width: '44%', height: '150%'}"></div1>
                                 <div1 id="myChart4" :style="{overflow: auto,top:'0%',right:'6%',width: '46%', height: '150%'}"></div1>
                             </div1>

                             <!--&lt;!&ndash; ECharts图表测试 &ndash;&gt;-->
                             <!--<div id="myChart2" :style="{width: '100%', height: '130%'}"></div>-->
                         </Card>

                     </div>

            </div>

            <Spin size="large" fix v-if="spinShow" style="z-index: 999;"></Spin>
            </div>
        </div>
    </div>
</template>


<script>
    import {
        todoList
    } from "@/api/activiti";
    import MapLoader from '@/plugins/amap.js';
    import {
        getCgqimg,
        getCloseimg,
        getJkimg,
        getPathArray,
        getSharpimg,
        getXhrimg
    } from '@/plugins/mapPoint.js';
    export default {

        name: "work-path",
        data() {
            return {
                // peopleAll:"0",
                // nowPeopleAll:"0",
                //head
                hzCount:[],
                hzAll:"0",
                sjhzAll:"0",
                qjhzAll:"0",
                jxhzAll:"0",
                cjhzAll:"0",
                shijian:"2020",
                sjAll:"0",
                yAll:"0",
                map:null,
                eventnum:"0",
                year:"0",
                jcAll:"0",
                zgAll:"0",
                month:"0",
                rectify:"0",
                spinShow:true,
                time:"",
                xcAll:"",
                xhAll:"",
                xcCharts:[],
                zzdata:[],
                // 发现问题数及整改率 图表
                wtCharts:[],
                peopleData:[],
                equipmentsData:[],
                //代办件数
                number:"3",
                searchForm: {
                    pageNumber: 1, // 当前页数
                    pageSize: 3// 页面大小
                },
                //获取饼状图
                sjEcharts:[],
                dbdata:[],
                dataAvg:[],
                xxdbdata:[],
                showBorder: false,
                showStripe: false,
                showHeader: false,
                showHeader1: true,
                modal1: false,
                dbtotal:0,
                //
                switch1:true,
                //巡查报告
                columns1: [
                    {
                        title: '序号',
                        key: 'name',
                        className: 'demo-table-info-column'
                    },
                    {
                        title: '行政区划',
                        key: 'age',
                        className: 'demo-table-info-column'
                    },
                    {
                        title: '完成率',
                        key: 'address',
                        className: 'demo-table-info-column'
                    }
                ],
                data1:[
                    {
                        name:'1',
                        age:'石园街道',
                        address:'80%'
                    }
                ],
                //人均巡河里程
                columns2: [
                    {
                        title: '序号',
                        key: 'name',
                        width:80,
                        className: 'demo-table-info-column'
                    },
                    {
                        title: '行政区划',
                        key: 'age',
                        className: 'demo-table-info-column'
                    },
                    {
                        title: '公里/人',
                        key: 'address',
                        className: 'demo-table-info-column'
                    }
                ],
                data2:[
                ],
                //自处理代办事件
                zclColumns: [
                    {
                        title: "序号",
                        key: "isSuspended",
                        align: "center",
                        className: 'demo-table-info-column',
                    },
                    {
                        title: "事件描述",
                        key: "eventDescribe",
                        //   width: 160,
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        // width: 150,
                        sortType: "desc",
                        sortable: true
                    }
                ],
                //代办事件
                dbColumns: [
                    {
                        title: "流程发起人",
                        key: "applyer",
                        className: 'demo-table-info-column',
                        width: 84
                    },
                    /*{
                      title: "优先级",
                      key: "priority",
                      width: 100,
                      sortable: true,
                      render: (h, params) => {
                        let text = "无",
                          color = "";
                        if (params.row.priority == 0) {
                          color = "green";
                        } else if (params.row.priority == 1) {
                          color = "orange";
                        } else if (params.row.priority == 2) {
                          color = "red";
                        } else {
                          color = "default";
                        }
                        this.dictPriority.forEach(e => {
                          if (e.value == params.row.priority) {
                            text = e.title;
                          }
                        });
                        return h("div", [
                          h(
                            "Tag",
                            {
                              props: {
                                color: color
                              }
                            },
                            text
                          )
                        ]);
                      }
                    },*/
                    {
                        title: "状态",
                        key: "isSuspended",
                        align: "center",
                        className: 'demo-table-info-column',
                        width: 100,
                        render: (h, params) => {
                        /*if (!params.row.isSuspended) {
                          return h("div", [
                            h("Badge", {
                              props: {
                                status: "success",
                                text: "已激活"
                              }
                            })
                          ]);
                        } else if (params.row.isSuspended) {
                          return h("div", [
                            h("Badge", {
                              props: {
                                status: "error",
                                text: "已挂起"
                              }
                            })
                          ]);
                        }
                      },
                      filters: [
                        {
                          label: "已激活",
                          value: false
                        },
                        {
                          label: "已挂起",
                          value: true
                        }
                      ],
                      filterMultiple: false,
                      filterMethod(value, row) {
                        if (value) {
                          return row.isSuspended == true;
                        } else if (!value) {
                          return row.isSuspended == false;
                        }
                      }*/
                        return h("div", [
                            h("Tag", {
                                    props: {
                                        color: "green",
                                    },
                                },
                                "处理中"
                            )
                        ]);
        },
        },

            {
                title: "事件类型",
                    key: "eventType",
                align: "center",
                className: 'demo-table-info-column'
                //   width: 90,
            },
        ],
            //事件追踪
            zzColumns: [
                // {
                //     title: "流程发起人",
                //     key: "applyer",
                //     className: 'demo-table-info-column',
                //     width: 84
                // },
                /*{
                  title: "优先级",
                  key: "priority",
                  width: 100,
                  sortable: true,
                  render: (h, params) => {
                    let text = "无",
                      color = "";
                    if (params.row.priority == 0) {
                      color = "green";
                    } else if (params.row.priority == 1) {
                      color = "orange";
                    } else if (params.row.priority == 2) {
                      color = "red";
                    } else {
                      color = "default";
                    }
                    this.dictPriority.forEach(e => {
                      if (e.value == params.row.priority) {
                        text = e.title;
                      }
                    });
                    return h("div", [
                      h(
                        "Tag",
                        {
                          props: {
                            color: color
                          }
                        },
                        text
                      )
                    ]);
                  }
                },*/
                {
                    title: "状态",
                    key: "isSuspended",
                    align: "center",
                    className: 'demo-table-info-column',
                    render: (h, params) => {
                    return h("div", [
                        h("Tag", {
                                props: {
                                    color: "green",
                                },
                            },
                            "处理中"
                        )
                    ]);
        },
        },

            {
                title: "事件内容",
                    key: "eventDescribe",
                align: "center",
                className: 'demo-table-info-column'
                //   width: 90,
            },
            {
                title: "任务期限",
                    key: "endDate",
                align: "center",
                className: 'demo-table-info-column'
                //   width: 90,
            },
        ],
            xxdbcolumns: [
                // 表头
                {
                    title: "所属流程",
                    key: "processName",
                    // width: 150
                },
                /* {
                   title: "委托代办人",
                   key: "owner",
                   width: 130
                 },*/
                {
                    title: "流程发起人",
                    key: "applyer",
                    //   width: 130
                },
                /*{
                  title: "优先级",
                  key: "priority",
                  width: 100,
                  sortable: true,
                  render: (h, params) => {
                    let text = "无",
                      color = "";
                    if (params.row.priority == 0) {
                      color = "green";
                    } else if (params.row.priority == 1) {
                      color = "orange";
                    } else if (params.row.priority == 2) {
                      color = "red";
                    } else {
                      color = "default";
                    }
                    this.dictPriority.forEach(e => {
                      if (e.value == params.row.priority) {
                        text = e.title;
                      }
                    });
                    return h("div", [
                      h(
                        "Tag",
                        {
                          props: {
                            color: color
                          }
                        },
                        text
                      )
                    ]);
                  }
                },*/
                {
                    title: "状态",
                    key: "isSuspended",
                    align: "center",
                    // width: 110,
                    render: (h, params) => {
                    /*if (!params.row.isSuspended) {
                      return h("div", [
                        h("Badge", {
                          props: {
                            status: "success",
                            text: "已激活"
                          }
                        })
                      ]);
                    } else if (params.row.isSuspended) {
                      return h("div", [
                        h("Badge", {
                          props: {
                            status: "error",
                            text: "已挂起"
                          }
                        })
                      ]);
                    }
                  },
                  filters: [
                    {
                      label: "已激活",
                      value: false
                    },
                    {
                      label: "已挂起",
                      value: true
                    }
                  ],
                  filterMultiple: false,
                  filterMethod(value, row) {
                    if (value) {
                      return row.isSuspended == true;
                    } else if (!value) {
                      return row.isSuspended == false;
                    }
                  }*/
                    return h("div", [
                        h("Tag", {
                                props: {
                                    color: "green",
                                },
                            },
                            "处理中"
                        )
                    ]);
        },
        },

            {
                title: "事件类型",
                    key: "eventType",
                align: "center",
                //  width: 90,
            },
            {
                title: "发生地点",
                    key: "locality",
                //   width: 160,
            },
            {
                title: "事件描述",
                    key: "eventDescribe",
                //   width: 160,
            },
            {
                title: "创建时间",
                    key: "createTime",
                // width: 150,
                sortType: "desc",
                sortable: true
            },
        ],
        };
        },
        methods: {
            //初始化
            init() {
                // this.getDictDataType();
                this.getDataList();
                let that = this;
                //未完成巡查村柱状图
                this.drawLine();
                //发现问题及整改率饼状图
                // this.getPieChart();
                //事件饼状图
                this.getsjEcharts();
                //统计巡查图表
                this.getxcCharts();
                //获取河长人均巡河长度
                this.getcenterOne();
                this.getsjAll();
                this.getxcAll();
                // this.getyAll();
                // this.getPeopleAll();
                this.getNowTime();
                this.getxhAll();
                this.getTime();
                this.getMonth();
                this.getjcAll();
                this.getzgAll();
                this.getRectify();
                this.getzzdata();
                this.getJJAll();

                // this.getmyChartZhong2();
                this.getProblemCharts();
                MapLoader().then(AMap => {
                    that.map =new AMap.Map("container", {
                    zoom:11,
                    zooms:[11,15],
                    center:[116.70,40.16],
                    pitch: 0,
                    viewMode: '3D',
                    resizeEnable: true,
                    /*layers: [
                        // 卫星
                        new AMap.TileLayer.Satellite(),
                        // 路网
                        new AMap.TileLayer.RoadNet()
                    ],*/
                });
                that.getRiverPeople();
                that.getEquipmentsData();
                that.addPolygon();
                that.spinShow = false;
            }, e => {
                    console.log('地图加载失败' ,e)
                })

            },
            path:function(){
                var _this = this;
                _this.$router.push({path:'/activiti/todo-manage'})
            },

            // change (status) {
            //   //  this.$Message.info('开关状态：' + status);
            //     var div = document.getElementById("echarts");
            //     if(status){
            //         div.style.display="block";
            //     }else {
            //         div.style.display="none";
            //     }
            // },

            // dispaayDiv:function(){
            //     var div = document.getElementById("echarts");
            //     if(flag)
            //         div.style.display="block";
            //     else
            //         div.style.display="none";
            //     flag=!flag;
            // },

            getDataList() {
                this.loading = true;
                todoList(this.searchForm).then(res => {
                    this.loading = false;
                if (res.success) {
                    this.dbdata = res.result.content;
                    this.dbtotal = res.result.totalElements;
                }
            });
            },


            getNowTime(){
                var date = new Date();
                this.time = date.toLocaleDateString();
            },
            // //获取总巡河人数
            // getPeopleAll:function(){
            //     let that = this;
            //     this.getRequest("/user/getPeopleCount").then(res => {
            //         if (res.success) {
            //         that.peopleAll = res.result;
            //     }
            // });
            // },
            //获取共接收问题
            getsjAll:function(){
                let that = this;
                this.getRequest("/actTask/getSjCount").then(res => {
                    if (res.success) {
                    that.sjAll = res.result;
                }
            });
            },
            //问题整改数
            getJJAll:function(){
                let that = this;
                this.getRequest("/actTask/getJJCount").then(res => {
                    if (res.success) {
                        that.yAll = res.result;
                    }
                });
            },
            //获取基层河长时间  问题数
            getTime:function(){
                let that = this;
                this.getRequest("/actTask/getTime").then(res => {
                    if (res.success) {
                    that.year = res.result;
                }
            });
            },
            //获取基层河长的整改率
            getRectify:function(){
                let that = this;
                this.getRequest("/actTask/getRectify").then(res => {
                    if (res.success) {
                    that.rectify = res.result;
                }
            });
            },
            //获取基层河长整改数量
            getzgAll:function(){
                let that = this;
                this.getRequest("/actTask/getzgAll").then(res => {
                    if (res.success) {
                    that.zgAll = res.result;
                }
            });
                this.getRequest("/user/getHeaderCount").then(res => {
                    if (res.success) {
                        that.hzCount = res.result;
                         var all = that.hzCount.all;
                       that.hzAll=all;
                       var sjhz = that.hzCount.sjhzAll;
                       that.sjhzAll =sjhz;
                       var qjh = that.hzCount.qjhzAll;
                       that.qjhzAll = qjh;
                       var jxhz = that.hzCount.jxhzAll;
                       that.jxhzAll = jxhz;
                       var cjhz = that.hzCount.cjhzAll;
                       that.cjhzAll = cjhz;
                       var shi = that.hzCount.shijian;
                       that.shijian = shi;
                    }
                }); },

            // //获取表头数据
            // getHeaderCount:function(){
            //     let that = this;
            //  );
            // },


            //获取事件追踪数据
            getzzdata:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getZzData").then(res => {
                    if (res.success) {
                    that.zzdata = res.result;
                }
            });
            },
            getMonth:function(){
                let that = this;
                this.getRequest("/actTask/getMonth").then(res => {
                    if (res.success) {
                    that.month = res.result;
                }
            });
            },
            getjcAll:function(){
                let that = this;
                this.getRequest("/actTask/getjcAll").then(res => {
                    if (res.success) {
                    that.jcAll = res.result;
                }
            });
            },
            getProblemCharts:function(){
                let that = this;
                this.getRequest("/actTask/getwtCharts").then(res => {
                    if (res.success) {
                    that.wtCharts = res.result;
                    this.getmyChart22();
                    this.getmyChart23();
                }
            });
            },
            //获取巡查次数
            getxcAll:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getXcCount").then(res => {
                    if (res.success) {
                    that.xcAll = res.result;
                }
            });
            },
            //获取巡查总公里数
            //获取巡查次数
            getxhAll:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getXhCount").then(res => {
                    if (res.success) {
                    that.xhAll = res.result;
                }
            });
            },
            //获取已处理事件
            // getyAll:function(){
            //     let that = this;
            //     this.getRequest("/actBusiness/getYCount").then(res => {
            //         if (res.success) {
            //             that.yAll = res.result;
            //         }
            //     });
            // },

            //获取设备数据
            getEquipmentsData:function(){
                let that = this;
                this.getRequest("/equipments/getAll").then(res => {
                    if (res.success) {
                    that.equipmentsData = res.result;
                    that.addMarkers();
                }
            });
            },
            //画地图点(按群组画巡河人)
            addPeopleMarkers:function(){
                let that = this;
                let lnglats = that.peopleData;
                let total = 0;
                var markers = [];
                let xhrImg = getXhrimg();
                //巡河人图标
                var xhrIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: xhrImg,
                    imageSize: new AMap.Size(48, 48),
                });
                for (var i = 0; i < lnglats.length; i++) {
                    var lnglat = lnglats[i];
                    if(null != lnglat.user){
                        total = total+1;
                        let u = lnglat.user;
                        let title = u.username+"---"+u.departmentTitle;
                        let content = [];
                        /*content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
                        content.push("电话：010-64733333");
                        content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");*/
                        content.push("河流名称:"+lnglat.riverName +
                            "<br/>"+
                            "巡河开始时间:"+lnglat.patrolStartTime +
                            "<br/>"+
                            "起始坐标:<br/>"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;经度:"+lnglat.longitude+
                            "<br/>"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;纬度:"+lnglat.dimensionality);
                        // content.push("<br/>");
                        // content.push("<a href="+lnglat.address+" target='_blank'>详细信息</a>");
                        // 创建点实例
                        let marker = new AMap.Marker({
                            title:title,
                            animation:"AMAP_ANIMATION_DROP",
                            position: new AMap.LngLat(lnglat.longitude, lnglat.dimensionality),
                            icon: xhrImg,
                            extData: {
                                id: lnglat.id
                            }
                        });
                        marker.content = this.createInfoWindow(title,content);
                        marker.on('click', that.markerClick);
                        // marker.emit('click', {target: marker});
                        markers.push(marker);
                    }
                }
                this.map.add(new AMap.OverlayGroup(markers));
                this.nowPeopleAll = total;
            },

            //画地图点(按群组画)
            addMarkers:function(){
                let that = this;
                let lnglats = that.equipmentsData;
                var markers = [];
                let cgqimg = getCgqimg();
                let jkImg = getJkimg();
                let xhrImg = getXhrimg();
                //传感器图标
                var cgqIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: cgqimg,
                    imageSize: new AMap.Size(48, 48),
                });
                //监控图标
                var jkIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: jkImg,
                    imageSize: new AMap.Size(48, 48),
                });
                //巡河人图标
                var xhrIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: xhrImg,
                    imageSize: new AMap.Size(48, 48),
                });
                for (var i = 0; i < lnglats.length; i++) {
                    var lnglat = lnglats[i];
                    let icon;
                    if(lnglat.equipmentType == 1){
                        icon = jkIcon;
                    }else{
                        icon = cgqIcon;
                    }

                    let title = lnglat.equipmentName;
                    let content = [];
                    /*content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
                    content.push("电话：010-64733333");
                    content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");*/
                    content.push(lnglat.bak);
                    // content.push("<br/>");
                    // content.push("<a href="+lnglat.address+" target='_blank'>详细信息</a>");
                    // 创建点实例
                    let marker = new AMap.Marker({
                        title:lnglat.equipmentName,
                        animation:"AMAP_ANIMATION_DROP",
                        position: new AMap.LngLat(lnglat.lon, lnglat.lat),
                        icon: icon,
                        extData: {
                            id: lnglat.id
                        }
                    });
                    marker.content = this.createInfoWindow(title,content);
                    marker.on('click', that.markerClick);
                    // marker.emit('click', {target: marker});
                    markers.push(marker);
                }
                this.map.add(new AMap.OverlayGroup(markers));
                // this.map.clearInfoWindow();
            },

            //标点点击事件
            markerClick:function(e) {
                var infoWindow = new AMap.InfoWindow({isCustom:true,closeWhenClickMap:true,offset: new AMap.Pixel(30, -40)});
                infoWindow.setContent(e.target.content);
                infoWindow.open(this.map, e.target.getPosition());
            },
            //构建自定义信息窗体
            createInfoWindow:function(title, content) {
                let that = this;
                var info = document.createElement("div");
                info.className = "custom-info input-card content-window-card";


                //可以通过下面的方式修改自定义窗体的宽高
                info.style.width = "300px";
                // 定义顶部标题
                var top = document.createElement("div");
                var titleD = document.createElement("div");
                var closeX = document.createElement("img");
                top.className = "info-top";
                titleD.innerHTML = title;
                titleD.onclick = that.map.clearInfoWindow( );
                closeX.src = getCloseimg();
                closeX.onclick = that.mapClearInfoWindow;
                // closeX.setAttribute("click", that.mapClearInfoWindow);

                top.appendChild(titleD);
                top.appendChild(closeX);
                info.appendChild(top);

                // 定义中部内容
                var middle = document.createElement("div");
                middle.className = "info-middle";
                middle.style.backgroundColor = 'white';
                middle.innerHTML = content;
                info.appendChild(middle);

                // 定义底部内容
                var bottom = document.createElement("div");
                bottom.className = "info-bottom";
                bottom.style.position = 'relative';
                bottom.style.top = '0px';
                bottom.style.margin = '0 auto';
                var sharp = document.createElement("img");
                sharp.src = getSharpimg();
                bottom.appendChild(sharp);
                info.appendChild(bottom);
                return info;
            },

            //关闭地图弹窗
            mapClearInfoWindow:function(){
                this.map.clearInfoWindow();
            },

            //画地图遮罩
            addPolygon:function(){
                let that = this;
                /* new AMap.DistrictSearch({
                   extensions:'all',
                   subdistrict:0
                 }).search('顺义区',function(status,result) {*/
                // 外多边形坐标数组和内多边形坐标数组
                // var outer = [
                //   new AMap.LngLat(-180,90,true),
                //   new AMap.LngLat(-180,-90,true),
                //   new AMap.LngLat(180,-90,true),
                //   new AMap.LngLat(180,90,true),
                // ];
                // var holes = result.districtList[0].boundaries
                // var pathArray = [
                //     outer
                // ];
                //顺义区地图遮罩边界
                var holes = getPathArray();
                var polygon = new AMap.Polygon( {
                    path:holes,
                    strokeColor: 'rgb(0,0,0)',
                    strokeWeight: 3,
                    strokeOpacity:1,
                    fillColor: 'rgba(255,255,255)',
                    fillOpacity: 0,
                    strokeStyle:'dashed',
                    strokeDasharray:[10,2]
                });
                // polygon.setPath(holes);
                that.map.add(polygon);
                // })
            },

            //获取巡河人员
            getRiverPeople(){
                this.loading = true;
                let url = "/river/getRiverPeople";

                this.postRequest(url,{time:this.time}).then(res => {
                    this.loading = false;
                if (res.success) {
                    this.peopleData = res.result;
                    this.addPeopleMarkers();
                }
            });
            },
            //清除地图所有点
            mapClearMarker:function(){
                let markers = this.map.getAllOverlays('marker')
                this.map.remove(markers);
            },

            //未完成巡查村
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    legend: {
                        itemHeight:'10',
                        data:['已完成','未完成'],
                        align: 'left',
                        textStyle:{//图例文字的样式
                            color:'#020202',
                            fontSize:'9'
                        },
                        itemWidth:12,
                        itemHeight:9,
                        x:'right',
                        bottom:'90%'
                    },
                    grid:{
                        top:'20%',//距上边距
                        bottom:'20%'
                    },
                    tooltip: {},
                    dataset: {
                        source: [
                            ['product', '未完成', '已完成'],
                            ['高丽营镇', 0, 85.8],
                            ['赵全营镇', 0, 73.4],
                            ['木林镇', 0, 65.2],
                            ['龙湾屯镇', 0, 53.9]
                        ]
                    },
                    xAxis: {type: 'category',
                        axisLabel: {
                            interval:0,
                            rotate:"30",
                            textStyle:{
                                fontSize:12,
                                color:'#020202'
                            }
                        },
                    },
                    yAxis: {axisLabel:{
                            textStyle:{
                                fontSize:12,
                                color:'#020202'
                            }
                        } },
                    series: [
                        {type: 'bar',},
                        {type: 'bar',
                            itemStyle:{
                                normal:{ color:'#31E917' }
                            }
                        },
                    ]
                });
            },
            //获取饼状图事件图表
            getsjEcharts:function(){
                let that = this;
                this.getRequest("/actTask/getSjCharts").then(res => {
                    if (res.success) {
                    that.sjEcharts = res.result;
                    this.getPieChart();
                    this.getPie2Chart();
                }
            });
            },
            //获取巡查集合
            getxcCharts:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getXcCharts").then(res => {
                    if (res.success) {
                    that.xcCharts = res.result;
                    this.getxcEcharts();
                }
            });
            },
            //获取河长巡河人均长度
            getcenterOne:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getCenterOne").then(res => {
                    if (res.success) {
                    that.dataAvg = res.result;
                }
            });
            },

            //发现问题及整改率饼状图
            getmyChart23:function(){
                let wttEcharts = this.wtCharts;
                let myChart23 = this.$echarts.init(document.getElementById('myChart23'))
                // 绘制图表
                //绘制图表
                myChart23.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: '20%',
                        textStyle:{//图例文字的样式
                            fontSize:'10',
                            color:'#020202'
                        },
                        itemWidth:12,
                        itemHeight:7,
                        padding:[8,8,8,8],
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '0%',//设置饼图大小
                            label:{
                                normal:{
                                    position:'inner',
                                    show:false
                                }
                            },
                            center: ['55%', '60%'],
                            data: wttEcharts,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            },
            getmyChart22:function(){
                let wtEcharts = this.wtCharts;
                let myChart22 = this.$echarts.init(document.getElementById('myChart22'))
                // 绘制图表
                //绘制图表
                myChart22.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },

                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '80%',//设置饼图大小
                            top:'20%',
                            center: ['55%', '60%'],
                            labelLine:{ //指示线的长度
                                normal:{
                                    length:7
                                }
                            },
                            data: wtEcharts,
                            label: {
                                textStyle: {
                                    fontSize:9
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            },
            //事件统计
            getPie2Chart:function(){
                let sjEcharts = this.sjEcharts;
                let myChart4 = this.$echarts.init(document.getElementById('myChart4'))
                // 绘制图表
                //绘制图表
                myChart4.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: '20%',
                        textStyle:{//图例文字的样式
                            fontSize:'10',
                            color:'#020202'
                        },
                        itemWidth:12,
                        itemHeight:7,
                        padding:[8,8,8,8],
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '0%',//设置饼图大小
                            label:{
                                normal:{
                                    position:'inner',
                                    show:false
                                }
                            },
                            center: ['55%', '60%'],
                            data: sjEcharts,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            },
            getPieChart:function(){
                let sjEcharts = this.sjEcharts;
                let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
                // 绘制图表
                //绘制图表
                myChart2.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },

                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '80%',//设置饼图大小
                            center: ['55%', '60%'],
                            labelLine:{ //指示线的长度
                                normal:{
                                    length:6
                                }
                            },
                            data: sjEcharts,
                            label: {
                                textStyle: {
                                    fontSize:9
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            },
            //巡查统计图表
            getxcEcharts:function(){
                let xcCharts = this.xcCharts;
                let myChart3 = this.$echarts.init(document.getElementById('myChart3'))
                // 绘制图表
                myChart3.setOption({
                    grid:{
                        top:'20%',//距上边距
                        bottom:'20%'
                    },
                    tooltip: {},
                    dataset: {
                        source: xcCharts
                    },
                    xAxis: {type: 'category',
                        axisLabel: {
                            interval:0,

                            textStyle:{
                                fontSize:8,
                                color:'#020202'
                            }
                        },
                    },
                    yAxis: {axisLabel: {

                            textStyle:{
                                fontSize:8,
                                color:'#020202'
                            }
                        },},
                    series: [
                        {
                            type: 'bar',
                            barWidth: 20,
                            itemStyle:{
                                normal:{ color:'#31E917' }
                            }
                        },
                    ]
                })
            }
        },
        mounted(){
            this.init();

        },

        created() {
        },
    };
</script>

